.questionnaire-edit-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;

    .question-type-wrapper {
        width: 256px;
        height: 100%;
        display: flex;
        flex-direction: column;
        background-color: #ffffff;

        .block-title {
            height: 64px;
            background: #FFFFFF;
            border-bottom: 1px solid #F0F2F7;
            padding: 0 24px;
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 16px;
            display: flex;
            align-items: center;
            flex-shrink: 0;
        }

        .group-wrapper {
            padding: 10px 20px 0 24px;
            flex: 1;
            overflow-y: auto;
            &::-webkit-scrollbar {
                width: 3px;
            }

            .type-group {
                margin-bottom: 14px;

                .group-title {
                    height: 38px;
                    display: flex;
                    align-items: center;
                    font-size: 14px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #666666;
                    line-height: 14px;
                }

                .type-list {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;

                    .type-item {
                        width: 104px;
                        height: 40px;
                        background: #FFFFFF;
                        border-radius: 4px;
                        border: 1px solid transparent;
                        margin-bottom: 6px;
                        cursor: pointer;
                        font-size: 14px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #666666;
                        line-height: 20px;
                        display: flex;
                        align-items: center;
                        padding: 0 12px;
                        user-select: none;

                        &:hover {
                            border-color: #20A0FF;
                            color: #20A0FF;
                            transition: all .2s;
                        }

                        .left-icon {
                            margin-right: 6px;
                        }
                    }
                }
            }
        }
    }

    .question-content-wrapper {
        min-width: 796px;
        max-width: 886px;
        flex: 1;
        margin: 0 2% 0 3%;
        overflow: auto;

        &::-webkit-scrollbar {
            width: 0;
        }

        .question-content__title {
            height: 110px;
            background: #FFFFFF;
            font-size: 22px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 12px;
        }
        .question-content__footer {
            height: 100px;
            background: #FFFFFF;
            display: flex;
            align-items: center;
            justify-content: center;
            .save-button {
                width: 120px;
                height: 36px;
                background: #FFFFFF;
                border-radius: 4px;
                border: 1px solid #20A0FF;
                font-size: 14px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #20A0FF;
                line-height: 14px;
            }
        }
        .question-content__empty {
            height: 444px;
            background: rgba(255, 255, 255, 0.7);
            border: 1px dashed #20A0FF;
            margin-bottom: 12px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            .empty-img {
                width: 330px;
            }
            .empty-desc {
                width: 268px;
                text-align: center;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #333333;
                line-height: 20px;
                margin-top: 20px;
            }
        }

        .question-list {
            .question-item {
                min-height: 76px;
                margin-bottom: 12px;
                padding: 24px 48px;
                display: flex;
                background: #FFFFFF;
                border: 2px solid transparent;
                position: relative;

                &.is-active {
                    border-color: #20A0FF;
                    box-shadow: 0 6px 10px 0 rgba(45, 65, 95, 0.12);
                }

                &.is-hover {
                }

                &__content {
                    flex: 1;
                }
                .item__title {
                    display: flex;
                    align-items: center;
                    .index-num {
                        margin-right: 12px;
                        font-size: 16px;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 500;
                        color: #333333;
                        line-height: 24px;
                        &::before {
                            content: "*";
                            color: #F95B56;
                        }
                    }
                    /deep/ .el-input {
                        &__inner {
                            border-color: transparent;
                            font-size: 16px;
                            &:hover {
                                border: 1px dashed #C2C2C2;
                            }
                            &:focus {
                                background: #F0F2F5;
                                border-radius: 4px;
                                border-color: transparent;
                            }
                        }
                        &.is-active {
                            .el-input__inner {
                                background: #F0F2F5;
                                border-radius: 4px;
                                border-color: transparent;
                            }
                        }
                        &.radio-input {
                            .el-input__inner {
                                padding-left: 40px;
                            }
                            &.other {
                                .el-input__inner {
                                    flex-wrap: wrap;
                                    &:after {
                                        content: "";
                                        display: inline-block;
                                        width: 67px;
                                        height: 14px;
                                        background: #FFFFFF;
                                        border-radius: 2px;
                                        border: 1px solid #C2C2C2;
                                        margin-left: 8px;
                                    }
                                }
                            }
                        }
                    }
                    &.option {
                        position: relative;
                        .sort-btn {
                            width: 24px;
                            height: 24px;
                            font-size: 20px;
                            color: #c2c2c2;
                            cursor: pointer;
                            margin-right: 5px;
                            .iconfont {
                                font-size: 24px;
                            }
                            &:hover {
                                color: #20A0FF;
                            }
                        }
                        .setting-option {
                            display: flex;
                            align-items: center;
                            .setting-btn {
                                width: 24px;
                                height: 24px;
                                font-size: 20px;
                                color: #c2c2c2;
                                cursor: pointer;
                                margin-left: 16px;
                                .iconfont {
                                    font-size: 24px;
                                }
                                &:hover {
                                    color: #20A0FF;
                                    transition: color .3s;
                                }
                            }
                        }
                        .radio-checkbox-icon {
                            width: 16px;
                            height: 16px;
                            border-radius: 2px;
                            border: 1px solid #c2c2c2;
                            position: absolute;
                            left: 42px;
                            top: 50%;
                            transform: translateY(-50%);
                            &.radio {
                                border-radius: 50%;
                            }
                        }
                        /deep/ .el-input {
                            &__inner {
                                font-size: 14px;
                            }
                        }
                    }
                    &.multiple {
                        position: relative;
                        .sort-btn {
                            width: 24px;
                            height: 24px;
                            font-size: 20px;
                            color: #c2c2c2;
                            cursor: pointer;
                            margin-right: 5px;
                            .iconfont {
                                font-size: 24px;
                            }
                            &:hover {
                                color: #20A0FF;
                                transition: color .3s;
                            }
                        }
                        .setting-option {
                            display: flex;
                            align-items: center;
                            .setting-btn {
                                width: 24px;
                                height: 24px;
                                font-size: 20px;
                                color: #c2c2c2;
                                cursor: pointer;
                                margin-left: 16px;
                                .iconfont {
                                    font-size: 24px;
                                }
                                &:hover {
                                    color: #20A0FF;
                                    transition: color .3s;
                                }
                            }
                        }
                        /deep/ .el-input {
                            &__inner {
                                font-size: 14px;
                            }
                        }
                    }
                }
                .item__title-desc {
                    /deep/ .el-input {
                        margin-left: 29px;
                        margin-top: 4px;
                        &__inner {
                            background: #F8F9FA;
                            border-radius: 4px;
                            border-color: transparent;
                        }
                    }
                    &.option {
                        .el-input {
                            margin-left: 41px;
                        }
                    }
                    &.multiple {
                        /deep/ .el-input {
                            margin-left: 41px;
                            &__inner {
                                background: #FFFFFF;
                                border-radius: 4px;
                                border: 1px solid #DADFE6;
                                cursor: auto;
                            }
                        }
                    }
                }
                &__option-list {
                    margin-top: 16px;
                    .option-item {
                        margin-top: 10px;
                    }
                }
                .add-btn {
                    margin-left: 29px;
                    margin-top: 30px;
                }

                .option-view {
                    width: 120px;
                    flex-shrink: 0;
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                    position: absolute;
                    top: 30px;
                    right: 48px;
                    &.page {
                        top: 24px;
                    }

                    .option-button {
                        cursor: pointer;
                        user-select: none;
                        width: 24px;
                        height: 24px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        color: #C2C2C2;
                        font-size: 20px;
                        margin-right: 24px;
                        &:last-of-type {
                            margin-right: 0;
                        }
                        .iconfont {
                            font-size: 24px;
                        }
                        &:hover {
                            color: #20A0FF;
                            transition: color .3s;
                        }
                    }
                }

                .simple-input {
                    margin-left: 41px;
                    pointer-events: none;
                    margin-top: 16px;
                }
                .image-upload {
                    margin-left: 41px;
                    margin-top: 16px;
                    .select-image {
                        width: 100px;
                        height: 100px;
                        background: #F8F9FA;
                        border-radius: 4px;
                        border: 1px dashed #C2C2C2;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        font-size: 12px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #999999;
                        .el-icon-plus {
                            font-size: 24px;
                            margin-bottom: 8px;
                        }
                    }
                }
                .image-select__option-list {
                    margin-left: 41px;
                    margin-top: 16px;
                    display: flex;
                    flex-wrap: wrap;
                    align-items: flex-start;
                    .image-select-item {
                        width: 140px;
                        min-height: 210px;
                        background: #FFFFFF;
                        border-radius: 4px;
                        border: 1px solid #EEEEEE;
                        margin-right: 9px;
                        margin-bottom: 20px;
                        overflow: hidden;
                        position: relative;
                        .item-image {
                            width: 140px;
                            height: 140px;
                            border-radius: 4px 4px 0 0;
                            img {
                                width: 100%;
                                height: 100%;
                            }
                        }
                        .input-view {
                            padding: 0 10px;
                            position: relative;
                            min-height: 40px;
                            /deep/ .el-input {
                                font-size: 14px;
                                &__inner {
                                    border-color: transparent;
                                    font-size: 14px;
                                    font-family: PingFangSC-Regular, PingFang SC;
                                    font-weight: 400;
                                    color: #333333;
                                    line-height: 20px;
                                    padding-left: 24px;
                                    padding-top: 8px;
                                }
                            }
                            .radio-circle {
                                position: absolute;
                                width: 16px;
                                height: 16px;
                                border-radius: 50%;
                                border: 1px solid #C2C2C2;
                                left: 10px;
                                top: 12px;
                                &.checkbox {
                                    border-radius: 2px;
                                }
                            }
                        }
                        .desc-view {
                            height: 30px;
                            background: #F5F6F7;
                            border-radius: 0 0 4px 4px;
                            padding: 0 10px;
                            cursor: pointer;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            font-size: 12px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #999999;
                            line-height: 30px;
                        }
                        .option-btn {
                            width: 100%;
                            height: 26px;
                            position: absolute;
                            top: 108px;
                            left: 0;
                            display: flex;
                            justify-content: center;
                            &-item {
                                width: 62px;
                                height: 26px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                background: rgba(0, 0, 0, 0.7);
                                border-radius: 2px;
                                font-size: 14px;
                                font-family: PingFangSC-Regular, PingFang SC;
                                font-weight: 400;
                                color: #FFFFFF;
                                line-height: 20px;
                                cursor: pointer;
                                &:first-of-type {
                                    margin-right: 4px;
                                }
                            }
                        }
                    }
                }
                .image-uploader {
                    width: 140px;
                    height: 210px;
                    background: #FFFFFF;
                    border-radius: 4px;
                    border: 1px dashed #C2C2C2;
                    /deep/ .el-upload {
                        width: 100%;
                        height: 100%;
                        .upload-icon {
                            width: 100%;
                            height: 140px;
                            background: #FFFFFF;
                            border-radius: 4px 4px 0 0;
                            border-bottom: 1px dashed #C2C2C2;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            font-size: 36px;
                            color: #C2C2C2;
                        }
                        .upload-tips {
                            height: 70px;
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            justify-content: center;
                            font-size: 12px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #999999;
                            line-height: 17px;
                        }
                    }
                    &:hover {
                        color: #20A0FF;
                        border-color: #20A0FF;
                        transition: all .2s;
                        .upload-icon, .upload-tips {
                            color: #20A0FF;
                            border-color: #20A0FF;
                            transition: all .2s;
                        }
                    }
                }


                // 分页
                .pagination-wrapper {
                    display: flex;
                    align-items: center;
                    .page-icon {
                        color: #A6D9FF;
                        margin-right: 14px;
                        .iconfont {
                            font-size: 20px;
                        }
                    }
                    .page-num {
                        font-size: 16px;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 500;
                        color: #333333;
                        line-height: 22px;
                    }
                    .page-time {
                        font-size: 14px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #333333;
                        line-height: 20px;
                        margin-left: 32px;
                    }
                    .arrow {
                        position: absolute;
                        left: 0;
                        top: 0;
                        color: #20A0FF;
                        font-size: 20px;
                        font-weight: 500;
                        transform: rotate(45deg);
                    }
                }
            }
        }
    }

    // 配置区域
    .question-setting-wrapper {
        width: 290px;
        height: 100%;
        flex-shrink: 0;
        .setting-content-wrapper {
            width: 100%;
            height: 100%;
            background-color: #ffffff;
            .title-view {
                height: 70px;
                background: #FFFFFF;
                border-bottom: 1px solid #F0F2F7;
                display: flex;
                align-items: center;
                padding: 0 20px;
                .title {
                    font-size: 16px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #333333;
                    line-height: 22px;
                }
                .sub-title {
                    font-size: 12px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #999999;
                    line-height: 17px;
                    margin-top: 4px;
                    margin-left: 8px;
                }
                .apply-btn {
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #20A0FF;
                    cursor: pointer;
                }
                &.page {
                    justify-content: space-between;
                    .left {
                        display: flex;
                        align-items: center;
                    }
                }
            }
            .setting-list {
                .setting-item {
                    min-height: 60px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 0 20px;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #333333;
                    line-height: 20px;
                    border-bottom: 1px solid #F0F2F7;
                    .setting-label {
                        display: flex;
                        align-items: center;
                    }
                    /deep/ .el-input-number {
                        &__decrease, &__increase {
                            background: transparent;
                            border-color: transparent;
                        }
                    }
                    /deep/ .el-radio-button {
                        &.is-active {
                            .el-radio-button__inner {
                                background: #E6F1FC;
                                color: #20A0FF;
                                border-color: #20A0FF;
                            }
                        }
                    }
                    &.column {
                        flex-direction: column;
                        align-items: flex-start;
                        .setting-item-title {
                            height: 60px;
                            display: flex;
                            align-items: center;
                            font-size: 14px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 500;
                            color: #333333;
                            line-height: 20px;
                        }
                        .setting-item-content {
                            width: 100%;
                            .setting-item-content__item {
                                height: 60px;
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                .label {
                                    margin-right: 10px;
                                    flex-shrink: 0;
                                }
                                /deep/ .el-input-number {
                                    &__decrease, &__increase {
                                        background: transparent;
                                        border-color: transparent;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

.flip-list-move {
    transition: transform 0.5s;
}

.no-move {
    transition: transform 0s;
}

.ghost {
    opacity: 0.5;
    //background: #c8ebfb;
}

.list-group {
    min-height: 20px;
}

.list-group-item {
    cursor: move;
}

.list-group-item i {
    cursor: pointer;
}

/deep/ .el-input-number .el-input__inner {
    text-align: left;
}

.fade-enter-active {
    transition: transform .3s;
    transform: translateX(0px);
}
.fade-leave-active {
    transition: transform .3s;
    transform: translateX(290px);
}
